<template>
  <div class="tabs ">
          <div class="tabs_bt">
            <router-link  to="tabs1" >   <div class="tabs_bt_div" style="border-bottom :2px solid #3B50A1;color: #3B50A1;">学习时长排行</div></router-link>
            <router-link  to="tabs2" > <div class="tabs_bt_div" style="color: #333333">答题数排行</div></router-link>
            <router-link  to="tabs3" ><div class="tabs_bt_div" style="color: #333333">模拟次数排行</div></router-link>
              <router-link  to="tabs4" ><div class="tabs_bt_div" style="color: #333333">正确率排行</div></router-link>
          </div>
    <!--标签1-->
    <Table :columns="columns1" :data="data1"></Table>
    <div @click="load1" style="text-align: center;margin-top: 13px; cursor: pointer;">查看更多</div>
  </div>
</template>

<script>
    export default {
        data() {
            return {

              columns1: [
                {
                  title: '排名',
                  key: 'no', align: 'center',
                  render: (h, params) => {
                    if (params.row.no==1){
                      return h('div', [
                        h('img', {
                          attrs: {
                            src:"http://sw.sdrhup.com:8080/education/images/top1.jpg"
                          },
                          style: {
                            //  marginTop:'5px',/
                            width:'33px',
                            height:'39px'
                          },
                        }),
                      ]);
                    }else if(params.row.no==2){
                      return h('div', [
                        h('img', {
                          attrs: {
                            src:"http://sw.sdrhup.com:8080/education/images/top2.jpg"
                          },
                          style: {
                            //  marginTop:'5px',/
                            width:'33px',
                            height:'39px'
                          },
                        }),
                      ]);
                    }else if(params.row.no==3){
                      return h('div', [
                        h('img', {
                          attrs: {
                            src:"http://sw.sdrhup.com:8080/education/images/top3.jpg"
                          },
                          style: {
                            //  marginTop:'5px',/
                            width:'33px',
                            height:'39px'
                          },
                        }),
                      ]);
                    }else{
                      return h('div', params.row.no);
                    }
                  }
                },
                { align: 'center',
                  title: '姓名',
                  key: 'name'
                },
                { align: 'center',
                  title: '学习时长(小时)',
                  key: 'time',
                  "width": 120,
                },
                { align: 'center',
                  title: '答题数',
                  key: 'daNum'
                },
                { align: 'center',
                  title: '模拟次数',
                  key: 'frequency'
                },
                { align: 'center',
                  title: '正确率',
                  key: 'percent'
                },
                { align: 'center',
                  title: '最高分',
                  key: 'highest'
                }
              ],
              data1: [
//                {
//                  no:1,//排名
//                  name: '程纪强的',//姓名
//                  time:1333,//学习时长
//                  daNum:9999,//答题数
//                  frequency:1,//模拟次数
//                  percent:'11%',//正确率
//                  highest:11,//最高分
//                },
              ],
              pageIndex:1,
            }
        },
      methods: {
        load1() {//查看更多
          this.pageIndex++;
          this.listData()
        },
        listData(){
          this.$axios({
            url: 'web/leaderBoard/personal',
            method: 'POST',
            data:{
              pageIndex:this.pageIndex,//多少页
              pageSize:10,//每页大小
              sort:{
                name:'studytime',
                direction:'DESC'
              }
            },
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            transformRequest: [function(data) {  //json
              data = JSON.stringify(data);
              return data
            }],
          }).then((response) => {
            console.log(response.data);
            var num=(this.pageIndex*10)-10
            for(var i=0;i<response.data.length;i++){
              this.data1.push(
                {
                  no: num+(i+1),//排名
                  name: response.data[i].username,//姓名
                  time:  parseFloat(response.data[i].studyTime/3600).toFixed(2),//学习时长
                  daNum:  response.data[i].numberOfAnswers,//答题数
                  frequency: response.data[i].examCount,//模拟次数
                  percent:  parseInt(response.data[i].correctRate)*100+'%',//正确率
                  highest:  response.data[i].highestGrade,//最高分
                })
            }
          }).catch((error) => {
            console.log("调取失败500");
            this.$Message.error('登陆失败！')
          });
        },
      },
      mounted:function() {
        //渲染列表
        this.listData();
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .tabs{
    margin:auto;
    width:1081px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:2px;
    padding: 21px;
    margin-bottom: 40px;
  }
  .tabs_bt_div{
    display: inline-block;
    font-size:18px;
    height: 40px;
    width: 140px;
    text-align: center;
    margin: 10px 10px 16px  10px;
    cursor: pointer;
  }
</style>
